<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <title>商城高并发抢购-商品详情页面</title>

    <link th:href="@{/statics/plugins/bootstrap-3.3.0/css/bootstrap.min.css}" rel="stylesheet">
    <link th:href="@{/statics/plugins/bootstrap-3.3.0/css/bootstrap-theme.min.css}" rel="stylesheet">
</head>
<body>
<div class="container">
    <div class="panel panel-default">
        <input id="killId" value="" th:value="${detail.id}" type="hidden"/>
        <div class="panel-heading">
            <h1>商品名称：<span th:text="${detail.itemName}"/></h1>
        </div>
        <div class="panel-body">
            <h2 class="text-danger">剩余数量：<span th:text="${detail.total}"/></h2>
        </div>
        <div class="panel-body">
            <h2 class="text-danger">
                开始时间： <span th:text="${#dates.format(detail.startTime,'yyyy-MM-dd HH:mm:ss')}"></span>
            </h2>
        </div>
        <div class="panel-body">
            <h2 class="text-danger">
                结束时间： <span th:text="${#dates.format(detail.endTime,'yyyy-MM-dd HH:mm:ss')}"></span>
            </h2>
        </div>
    </div>

    <td>
        <a th:if="${detail.canKill} eq 1" class="btn btn-info" style="font-size: 20px" onclick="executeKill()">抢购</a>
        <a th:unless="${detail.canKill} eq 1" class="btn btn-info" style="font-size: 20px">哈哈~商品已抢购完毕或者不在抢购时间段哦!</a>
    </td>
</div>

</body>
<script src="/statics/plugins/jquery.js"></script>
<script src="/statics/plugins/bootstrap-3.3.0/js/bootstrap.min.js"></script>
<script src="/statics/plugins/jquery.cookie.min.js"></script>
<script src="/statics/plugins/jquery.countdown.min.js"></script>

<!--<script src="${ctx}/static/script/kill.js"></script>-->

<link rel="stylesheet" href="/statics/css/detail.css" type="text/css">
<script type="text/javascript">
    function executeKill() {
        $.ajax({
            type: "POST",
            url: "/kill/execute",
            contentType: "application/json;charset=utf-8",
            data: JSON.stringify(getJsonData()),
            dataType: "json",

            success: function (res) {
                if (res.code == 0) {
                    //alert(res.msg);
                    window.location.href = "/kill/execute/success"
                } else {
                    //alert(res.msg);
                    window.location.href = "/kill/execute/fail"
                }
            },
            error: function (message) {
                alert("提交数据失败！");
                return;
            }
        });
    }

    function getJsonData() {
        var killId = $("#killId").val();
        var data = {
            "killId": killId
        };
        return data;
    }
</script>

</html>